
import React, { FC, useState, useEffect, } from 'react'
import { Layout, Menu, Breadcrumb, Tabs, Input, Tooltip, Button, Form } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
import style from './setting.less'
import { CopyOutlined } from '@ant-design/icons';

const Setting = () => {
    const layout = {
        labelCol: { span: 50 },
        wrapperCol: { span: 16 },
    };
    const { TabPane } = Tabs;
    const { TextArea } = Input;             //页脚信息
    let onChange = (activeKey: any) => {
        seti(++i);
        setactiveKey(activeKey);
    };
    let [initialPanes, setinitialPanes] = useState<any>([
        { title: 'en', content: 'a', key: '1' },
        { title: 'ch', content: 'b', key: '2' },
    ]);
    let [i, seti] = useState<any>(0);
    let [activeKey, setactiveKey] = useState<any>(initialPanes[0].key);
    var [panes, setpanes] = useState(initialPanes);

    const onChange1 = (newValue: any, e: any) => {
        console.log('onChange', newValue, e);
    }

    return (
        <div className={(style.box)}>
            <Layout style={{ minHeight: '100vh' }}>
                <Layout>
                    <Header style={{ background: '#fff', padding: 0 }} >
                        <span className={style.bread}>
                            <Breadcrumb.Item href="">工作台</Breadcrumb.Item>
                            <Breadcrumb.Item>系统设置</Breadcrumb.Item>
                        </span>
                    </Header>
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}></Breadcrumb>
                        <div style={{ padding: 24, background: '#fff', minHeight: 400 }}>
                            <Tabs tabPosition='left' onTabClick={() => {
                                return seti(++i);
                            }} className="left">
                                <TabPane tab="系统设置" key="1">
                                    <p>系统地址</p>
                                    <p><Input defaultValue="" /></p>
                                    <p>后台地址</p>
                                    <p><Input placeholder="Basic usage" /></p>
                                    <p>系统标题</p>
                                    <p><Input placeholder="Basic usage" /></p>
                                    <p>Logo</p>
                                    <p><Input.Group compact>
                                        <Input
                                            style={{ width: 'calc(100% - 32px)', height: "35px" }}
                                            defaultValue=""
                                        />
                                        <Tooltip title="copy git url">
                                            <Button icon={<CopyOutlined />} />
                                        </Tooltip>
                                    </Input.Group></p>
                                    <p>Favicon</p>
                                    <p>
                                        <Input.Group compact>
                                            <Input
                                                style={{ width: 'calc(100% - 32px)', height: "35px" }}
                                                defaultValue=""
                                            />
                                            <Tooltip title="copy git url">
                                                <Button icon={<CopyOutlined />} />
                                            </Tooltip>
                                        </Input.Group>
                                    </p>
                                    <p>页角信息</p>
                                    <p>
                                        <TextArea rows={4} style={{ height: '200px' }} />
                                    </p>
                                    <br />
                                    <p>
                                        <Button type="primary">保存</Button>
                                    </p>
                                </TabPane>
                                <TabPane tab="国际化设置" key="2">
                                    国际化设置
                                    <Tabs
                                        type="editable-card"
                                        onChange={onChange}
                                        activeKey={activeKey}
                                    // onEdit={onEdit}
                                    >
                                        {panes.map((pane: any, index: number) => (
                                            <TabPane tab={pane.title} key={pane.key}>
                                                <div
                                                    id={`monaco_${index}`}
                                                    style={{ width: '800px', height: '500px' }}
                                                ></div>
                                            </TabPane>
                                        ))}
                                    </Tabs>
                                    {/* <MonacoEditor
                                        width="800"
                                        height="600"
                                        language="javascript"
                                        theme="vs-dark"
                                        onChange={onChange1}
                                    /> */}
                                    <Form>
                                        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                                            <Button type="primary" htmlType="submit">
                                                保存
                                            </Button>
                                        </Form.Item>
                                    </Form>
                                </TabPane>
                                <TabPane tab="SEO设置" key="3">
                                    <p>关键词</p>
                                    <p><Input defaultValue="" /></p>
                                    <p>描述信息</p>
                                    <p>
                                        <TextArea rows={4} style={{ height: '200px' }} />
                                    </p>
                                    <br />
                                    <p>
                                        <Button type="primary">保存</Button>
                                    </p>
                                </TabPane>
                                <TabPane tab="数据统计" key="4">
                                    <p>百度统计</p>
                                    <p><Input defaultValue="" /></p>
                                    <p>谷歌分析</p>
                                    <p><Input defaultValue="" /></p>
                                    <br />
                                    <p>
                                        <Button type="primary">保存</Button>
                                    </p>
                                </TabPane>
                                <TabPane tab="OSS设置" key="5">
                                    OSS设置
                                </TabPane>
                                <TabPane tab="SMTP服务" key="6">
                                    <p>SMPT地址</p>
                                    <p><Input defaultValue="" /></p>
                                    <p>SMPT端口 (强制使用SSL链接) </p>
                                    <p><Input defaultValue="" /></p>
                                    <p>SMTP用户</p>
                                    <p><Input defaultValue="" /></p>
                                    <p>SMTP密码</p>
                                    <p><Input defaultValue="" /></p>
                                    <p>发件人</p>
                                    <p><Input defaultValue="" /></p>
                                    <br />
                                    <p>
                                        <Button type="primary">保存</Button>&emsp;<Button >测试</Button>
                                    </p>
                                </TabPane>
                            </Tabs>
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </div>
    )
}
export default Setting

